// 列表数据
const listData: any[] = [];

for (let i = 1; i < 7; i++) {
  listData.push({
    id: i,
    name: "card",
  });
}

const CardList = (props: any) => {
  const { openModal } = props;

  return (
    <div className="nft-card-list frame-box">
      <ul className="card-list">
        {listData.map((item) =>
          item.id < 3 ? (
            <li key={item.id} className="item">
              <div className="item-box has-card">
                <div className="card-box">
                  <div className="level">
                    <span>Common 80%</span>
                  </div>
                  <img src="/images/card.png" alt="" />
                </div>
                <div className="hashrate">
                  <span className="num">123,124</span>
                  <span className="unit">H/s</span>
                </div>
              </div>
            </li>
          ) : (
            <li key={item.id} className="item">
              <div className="item-box no-card">
                <div className="card-box">
                  <img src="/images/nft_card_add.png" alt="" />
                </div>
                <div className="hashrate"></div>
              </div>
            </li>
          )
        )}
      </ul>

      <div className="combine-box">
        <div className="card-box">Silver Card</div>
        <div className="symbol-box">
          <img src="/images/nft_symbol_1.png" alt="" />
        </div>
        <div className="card-box">Silver Card</div>
        <div className="symbol-box">
          <img src="/images/nft_symbol_2.png" alt="" />
        </div>
        <div className="card-box gold"> Gold Card</div>
        <div className="btn-box">
          <div
            className="btn"
            onClick={() => {
              openModal(2);
            }}
          >
            Combine
          </div>
        </div>
      </div>
    </div>
  );
};

export default CardList;
